<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../tool/layui/css/layui.css" type="text/css" />
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
    <script type="text/javascript" src="js/visual.js"></script>
    <script type="text/javascript" src="js/takephoto.js" defer=true></script>
</head>
<body>
<div >
    <div class="layui-row layui-col-space5">
        <div class="layui-col-md4">
            <div>
                <!--                <button type="button" class="layui-btn">一个标准的按钮</button>-->
                <!--                库存占比饼图-->
                <div id="app1">
                    <div class="layui-body" id="content">
                        <form class="layui-form">
                            <div class="layui-form-item">
                                <div class="layui-input-block">
                                    <select name="department_name" lay-filter="department">
                                        <option v-for="department in departmentList" :value="department.departmentId">{{ department.departmentName }}</option>
                                    </select>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                <div style="width: 400px;height: 400px"><div id="pieChart" style="width: 100%;height:100%;"> </div></div>

            </div>
        </div>
        <div class="layui-col-md8">
            <div id="app2">
                <!--                库存表格图-->
                <!--                <div class="layui-body">-->
                <!--                    <form class="layui-form">-->
                <!--                        <div class="layui-form-item">-->
                <table class="layui-table">
                    <colgroup>
                        <col width="150">
                        <col width="200">
                        <col>
                    </colgroup>
                    <thead>
                    <tr>
                        <th>机构</th>
                        <th>产品</th>
                        <th>库存数量</th>
                        <th>本月累计出库量</th>
                        <th>平均库存周转天数</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="warehouse in warehouseList">
                        <td>广州银行总行</td>
                        <td>{{ warehouse.warehouseName }}</td>
                        <td>{{ warehouse.metalSize }}</td>
                        <td>{{ warehouse.monthOut }}</td>
                        <td>{{ warehouse.metalSize }}</td>
                    </tr>
                    </tbody>
                </table>

            </div>
        </div>
    </div>
    <div class="layui-row">
        <div style="width: 1000px;height: 400px">
            <!--            库存折线图-->
<!--            <div id="lineChart" style="width: 100%;height:100%;"></div>-->
            <div id="standard-area" style="width: 100%;height:100%;"></div>
        </div>
    </div>
</div>


<video id="video" width="500px" height="500px" autoplay="autoplay"></video>
<input type="button" title="开启摄像头" value="开启摄像头" onclick="getMedia()" />
<canvas id="canvas" width="500px" height="500px"></canvas>
<button id="snap" onclick="takePhoto()">拍照</button>



<script src="../tool/layui/layui.js"></script>
<script type="text/javascript" src="../tool/js/jquery-1.10.1.js"></script>
<script src="../tool/js/vue.js"></script>
<script src="js/visual.js"></script>
</body>
</html>